<template>

    <el-form>
        <el-collapse v-model="activeNames" @change="handleChange" >
            <el-collapse-item title="高级配置 - 车辆筛选" name="1">
                <el-form
                    style="border-left: 1px solid #ecedef;border-right: 1px solid #ecedef;border-top: 1px solid #ecedef;border-bottom: 1px solid #ecedef">
                    <el-row>
                        <el-col style="padding-left: 15px">
                            <el-row style="height: 15px"/>
                            <el-checkbox>城市设置</el-checkbox>
                            <el-row style="height: 15px"/>
                            <el-row style="padding-left: 55px">
                                <el-form-item label="行驶城市:"
                                              style="color: black;font-weight: normal; padding-left: 5px; padding-right: 10px;">
                                    <el-cascader disabled></el-cascader>
                                </el-form-item>
                                <el-form-item style="width: 15px"></el-form-item>
                                <el-form-item label="城市行驶天数:"
                                              style="color: black;font-weight: normal; padding-left: 5px; padding-right: 10px;">
                                    <el-cascader disabled></el-cascader>
                                </el-form-item>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-form>
                <el-row style="height: 15px"/>

                <el-form
                    style="border-left: 1px solid #ecedef;border-right: 1px solid #ecedef;border-top: 1px solid #ecedef;border-bottom: 1px solid #ecedef">
                    <el-row>
                        <el-col style="padding-left: 15px">
                            <el-row style="height: 15px"/>
                            <el-checkbox>车辆设置</el-checkbox>
                            <el-row style="height: 15px"/>
                            <el-row style="padding-left: 55px">
                                <el-form-item label="车牌 :"
                                              style="color: black;font-weight: normal; padding-left: 5px; padding-right: 10px;">
                                    <el-radio-group v-model="radio">
                                        <el-radio :label="1">文本上传</el-radio>
                                        <el-radio :label="2">文本框输入</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item style="width: 15px"/>
                                <el-form-item>
                                    <el-input v-model="licensePlateTxt"></el-input>
                                    <!--                      <el-upload-->
                                    <!--                          class="upload-demo"-->
                                    <!--                          action="https://jsonplaceholder.typicode.com/posts/"-->
                                    <!--                          :on-preview="handlePreview"-->
                                    <!--                          :on-remove="handleRemove"-->
                                    <!--                          :before-remove="beforeRemove"-->
                                    <!--                          multiple-->
                                    <!--                          :limit="3"-->
                                    <!--                          :on-exceed="handleExceed"-->
                                    <!--                          :file-list="fileList">-->
                                    <!--                        <el-button size="small" type="primary">点击上传</el-button>-->
                                    <!--                        <div slot="tip" class="el-upload__tip">支持拓展名: .excel .txt .csv</div>-->
                                    <!--                      </el-upload>-->
                                </el-form-item>
                            </el-row>
                            <el-row style="padding-left: 60px">
                                <el-form-item>
                                    <i class="el-icon-question"/>
                                </el-form-item>
                                <el-form-item>
                                    <el-col style="color: black;font-weight: normal;">当前配置方案：</el-col>
                                </el-form-item>
                                <el-form-item>
                                    <el-cascader v-model="valueOfStrategy" :options="strategyNowOptions"
                                                 :props="{ expandTrigger: 'hover' }"
                                                 @change="handleChangeDisplay(valueOfStrategy)"
                                                 style="width: 230px"></el-cascader>
                                </el-form-item>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-form>

                <el-row style="height: 15px"/>

                <el-form
                    style="border-left: 1px solid #ecedef;border-right: 1px solid #ecedef;border-top: 1px solid #ecedef;border-bottom: 1px solid #ecedef">
                    <el-row>
                        <el-col style="padding-left: 15px">
                            <el-row style="height: 15px"/>
                            <el-checkbox>排序设置</el-checkbox>
                            <el-row style="height: 15px"/>
                            <el-row style="padding-left: 60px">
                                <el-form-item
                                    style="color: black;font-weight: normal; padding-left: 5px; padding-right: 10px;">
                                    <el-checkbox>按车速区间行驶里程:</el-checkbox>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="distance" placeholder="请选择">
                                        <el-option
                                            v-for="item in distanceOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item style="width: 15px;"/>
                                <el-form-item>
                                    <el-radio-group v-model="orderByDistance">
                                        <el-radio :label="9">升序</el-radio>
                                        <el-radio :label="10">降序</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-row>
                            <el-row style="padding-left: 60px">
                                <el-form-item
                                    style="color: black;font-weight: normal; padding-left: 5px; padding-right: 10px;">
                                    <el-checkbox>按智驾功能使用频次:</el-checkbox>
                                </el-form-item>
                                <el-form-item>
                                    <el-select v-model="times" placeholder="请选择">
                                        <el-option
                                            v-for="item in timesOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item style="width: 15px;"/>
                                <el-form-item>
                                    <el-radio-group v-model="orderByTimes">
                                        <el-radio :label="11">升序</el-radio>
                                        <el-radio :label="12">降序</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-row>
                            <el-row style="padding-left: 60px">
                                <el-form-item
                                    style="color: black;font-weight: normal; padding-left: 5px; padding-right: 10px;">
                                    <el-checkbox>TOP N</el-checkbox>
                                </el-form-item>
                                <el-form-item style="padding-left: 88px">
                                    <el-select v-model="n" placeholder="请选择">
                                        <el-option
                                            v-for="item in nOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-form>

                <el-form-item label="车牌和排序选项未设置时，查询结果将随机显示车牌" required style="height: 30px"></el-form-item>

                <div style="width: 100%;display: flex;justify-content: center">
                    <el-button  type="primary" @click="queryCarLatestConfig()" style="margin: 0 auto">查询
                    </el-button>
                </div>

                <el-row style="height: 15px"/>

                <el-form-item>
                    <TableComponent v-loading="isLoading" element-loading-text="加载中..." :assetList="advancedTableData"
                                    @checkSelect="checkSelect" @checkSelectAll="checkSelectAll" :checkBox=true
                                    :tableColumns="advancedTableColumns">

                        <template #configInfoId="{row}">
                            <span v-if="row.configInfoType===0">T{{ row.configInfoId }}</span>
                            <span v-if="row.configInfoType===1">TG{{ row.configInfoId }}</span>
                            <span v-else-if="!row.configInfoType&&row.configInfoType!==0">--</span>
                        </template>

                        <template #vehicleUseType="{row}">
                            <span v-if="row.vehicleUseType===0">量产车</span>
                            <span v-if="row.vehicleUseType===1">研发车</span>
                            <span v-if="row.vehicleUseType===2">台架</span>
                            <span v-else-if="!row.vehicleUseType&&row.vehicleUseType!==0">--</span>
                        </template>
                        <template #version="{row}">
                            <span v-if="row.version">V{{ row.version }}</span>
                            <span v-else-if="!row.version">--</span>
                        </template>
                    </TableComponent>
                    <el-pagination style="margin-top: 20px;float:right" background layout="total, prev, pager, next" small
                                   :total="requirePageData.total"
                                   :currentPage="requirePageData.current" :page-size="requirePageData.size"
                                   @current-change="handlePageChange">
                    </el-pagination>
                </el-form-item>
            </el-collapse-item>
        </el-collapse>
        <el-form-item>
            <div style="display: flex;justify-content: center;margin-top: 30px">
                <el-button  type="primary" @click="nextStep()">下一步</el-button>
            </div>
        </el-form-item>
    </el-form>


</template>


<script setup>
import {getCarLatestConfig} from "@/api/strategyConfig";
import TableComponent from '@/components/TableComponent.vue';
import {advancedTableColumns} from "@/constant/collectionStrategyConfig";
import { ElMessage } from "element-plus";
import {onMounted, reactive, defineProps, ref, toRaw, computed} from "vue";
import {useRouter} from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const projectObj = computed(() => store.state.projectObj)
let rawProjectObj = toRaw(projectObj.value)

const requirePageData = reactive({
    current: 1,
    size: 10,
    total: 0
})

const reqData = reactive({
    vehicleUseType: [],
    vehicleType: [],
    domainControlType: []
})

const props = defineProps(['advancedReqData', 'selectedStrategy','hasTriggerFlag'])


const advancedTableData = ref([]);
const timesOptions = ref([])
const distanceOptions = ref([])
const nOptions = ref([])
let isLoading = ref(false)
let orderByTimes = ref('')
let orderByDistance = ref('')
let times = ref('')
let distance = ref('')
let valueOfStrategy = ref('')
let strategyNowOptions = ref([])
let licensePlateTxt =ref('')
let radio =ref('')
let activeNames =ref('')
let n =ref('')

const handlePageChange = (val) => {
    requirePageData.current = val;
    getCarLatestConfigFn();
}

const queryCarLatestConfig = () => {
    let data = toRaw(props.advancedReqData);
    reqData.vehicleUseType = data.vehicleUseType;


    getCarLatestConfigFn();

}
const getCarLatestConfigFn = () => {
    getCarLatestConfig({
        vehicleUseType: reqData.vehicleUseType,
        // vehicleType: reqData.vehicleType,
        // domainControlType: reqData.domainControlType,
        ...requirePageData
    }).then(res => {
        if (res.data.code === 200) {
            advancedTableData.value = res.data.data.records;
            requirePageData.current = res.data.data.current;
            requirePageData.total = res.data.data.total;
        }
    })
}
const handleChangeDisplay = () => {}
const handleChange = () => {}
const checkedData = ref();
const checkSelect = (val) => {
    checkedData.value = val;
}
const checkSelectAll = (val) => {
    checkedData.value = val;
}
const router = useRouter();

const reqCheckBoxData = reactive({});

const nextStep = () => {
    if(!props.hasTriggerFlag){
        ElMessage.warning('请选择策略配置方案')
        return
    }

    // reqData：车辆用途、车型、域控类型
    // reqCheckBoxData：采集时长、采集频次


    let data = toRaw(props.advancedReqData);
    console.log('data.vehicleUseType',data.vehicleUseType)
    if(data.vehicleUseType.length === 0){
        ElMessage.warning('请勾选车辆用途')
        return
    }

    reqCheckBoxData.collectTimeBefore = data.collectTimeBefore;
    reqCheckBoxData.collectTimeAfter = data.collectTimeAfter;
    reqCheckBoxData.triggerCount = data.triggerCount;
    reqCheckBoxData.cycle = data.cycle;

    reqCheckBoxData.dataPload = data.dataPload;
    reqCheckBoxData.plogFaultLevel = data.plogFaultLevel;
    reqCheckBoxData.plogLongtermMonitor = data.plogLongtermMonitor;
    reqCheckBoxData.uploadAllLog = data.uploadAllLog;
    reqCheckBoxData.canCollect = data.canCollect;
    reqCheckBoxData.ethCollect = data.ethCollect;
    reqCheckBoxData.calibrationCollect = data.calibrationCollect;
    reqCheckBoxData.faultCollect = data.faultCollect;
    // reqCheckBoxData.logCollect = data.logCollect;
    reqCheckBoxData.scCollect = data.scCollect;
    reqCheckBoxData.collect = data.collect;
    // reqCheckBoxData.scFlag = data.scFlag;
    reqCheckBoxData.cameraLogCollect = data.cameraLogCollect;
    reqCheckBoxData.monitorLogCollect = data.monitorLogCollect;
    reqCheckBoxData.desayLogUpload = data.desayLogUpload;
    reqCheckBoxData.desayLogMax = data.desayLogMax;
    
    reqCheckBoxData.triggerCdnConfig = data.triggerCdnConfig;
    // ep40 和ep41项目，向后端发送 allLogMaxSizeMb字段，配置全量日志大小。 20240515
    if(rawProjectObj.name.includes('EP40') || rawProjectObj.name.includes('EP41')){
        reqCheckBoxData.allLogMaxSizeMb = data.allLogMax;        // 全量日志大小
    }
    reqData.vehicleUseType = data.vehicleUseType;
    // reqData.vehicleType = data.vehicleType;
    // reqData.domainControlType = data.domainControlType;
    let selectedStrategy = toRaw(props.selectedStrategy);

    if (checkedData.value) {
        router.push({
            path: '/triggerConfiguration/ConfigurationComparison',
            name: 'configurationComparison',
            query: {
                id: +new Date(),
                from: 'trigger'
            }
        });

        sessionStorage.setItem('routerPara', JSON.stringify({
            checkedData: checkedData.value,
            selectedStrategy,
            reqCheckBoxData
        }))
    } else {
        router.push({
            path: '/triggerConfiguration/ConfigurationComparison',
            name: 'configurationComparison',
            query: {
                id: +new Date(),
                from: 'trigger'
            }
        });

        sessionStorage.setItem('routerPara', JSON.stringify({
            reqData: reqData,
            selectedStrategy,
            reqCheckBoxData
        }))

    }

}
</script>
